<template>
	<div class="x-contextmenu">
		<div @contextmenu.prevent="$refs.contextmenu.open($event,{index:index})">
			<slot></slot>
		</div>
		<Contextmenu ref="contextmenu" class="context-menu">
			<li class="context-menu_li" v-for="(item,index) in menuList" :key="index" @click="menuTab(item)">{{item.name}}</li>
		</Contextmenu>
	</div>
</template>
<script>
	import Contextmenu from './widget/context-menu.vue'
	export default {
		props: {
			widget: {},
			menuList: {},
			index: {}
		},
		components: {
			Contextmenu
		},
		methods: {
			menuTab(val) {
				this.$emit('chang', this.widget, val)
			}
		}
	}
</script>
<style lang="scss">
	.x-contextmenu {
		.context-menu {
			.ctx-menu {
				margin: 0;
				padding: 4px 0;
				border: 1px solid #e5e5e5;
				border-radius: 0;
				min-width: 120px;
			}

			.context-menu_li {
				padding: 6px 15px;
				cursor: pointer;

				&:hover {
					background-color: #999;
				}
			}
		}
	}
</style>